<template>
  <div>
    <a-divider v-if="commentToggle"><a @click="openComment">点击展开评论<a-icon style="margin-left: 8px" type="down" /></a></a-divider>
    <a-divider v-else><a @click="commentToggle = true">点击收起评论<a-icon style="margin-left: 8px" type="up" /></a></a-divider>
    <a-list item-layout="vertical" v-if="!commentToggle">
      <a-list-item v-for="item in commentList" :key="item.id">
        <div class="content">
          <a-tag color="#2db7f5" v-if="item.status === caseCommentStatusEnum.ENABLE.KEY">{{ item.statusDesc }}</a-tag>
          <a-tag color="#fa8c16" v-else-if="item.status === caseCommentStatusEnum.DISABLE.KEY">{{ item.statusDesc }}</a-tag>
          <a-tag v-else>{{ item.statusDesc }}</a-tag>
          {{ item.detail }}
        </div>
        <div class="customer-info">
          {{ item.customerName }}
          <em>{{ item.crtDt }}</em>
        </div>
        <span slot="actions">
          <a-popconfirm title="确定隐藏该评论吗?" @confirm="() => disableComment(item)">
            <a-icon style="margin-right: 8px" type="eye-invisible"/>隐藏
          </a-popconfirm>
        </span>
        <span slot="actions">
          <a-popconfirm title="确定删除该评论吗?" @confirm="() => delComment(item)">
            <a-icon style="margin-right: 8px" type="delete" />删除
          </a-popconfirm>
        </span>
      </a-list-item>

      <s-divider v-if="pageLast" text="没有更多评论啦"/>
      <div
        v-else
        slot="loadMore"
        :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"
      >
        <a-spin v-if="loadingMore" />
        <a-button v-else @click="onLoadMore">
          加载更多评论
        </a-button>
      </div>
    </a-list>
  </div>
</template>

<script>

import { apiQueryCaseCommentList, apiDelCaseComment, apiDisableCaseComment } from '@/api/article'
import { SDivider } from '@/components'
import { CASE_COMMENT_STATUS_ENUM } from '@/store/mutation-types'

export default {
  name: 'Comment',
  components: {
    SDivider
  },
  props: {
    caseInfoId: {
      type: String,
      default: null
    }
  },
  data () {
    return {
      pageNumber: 0,
      pageSize: 10,
      pageLast: false,
      commentToggle: true,
      showComment: false,
      commentList: [],
      loadingMore: false,
      caseCommentStatusEnum: CASE_COMMENT_STATUS_ENUM
    }
  },
  watch: {
    caseInfoId (newValue, oldValue) {
      this.commentList = []
      apiQueryCaseCommentList({ caseInfoId: this.caseInfoId }).then(res => {
        this.commentList = this.commentList.concat(res.data.content)
      })
    }
  },
  methods: {
    openComment () {
      this.commentToggle = false
    },
    onLoadMore () {
      this.loadingMore = true
      this.pageNumber++
      const queryParams = {
        caseInfoId: this.caseInfoId,
        size: this.pageSize,
        page: this.pageNumber
      }
      apiQueryCaseCommentList(queryParams).then(res => {
        this.loadingMore = false
        this.pageLast = res.data.last
        this.commentList = this.commentList.concat(res.data.content)
      })
    },
    disableComment (record) {
      apiDisableCaseComment(record.id).then(res => {
        record.status = this.caseCommentStatusEnum.DISABLE.KEY
        record.statusDesc = this.caseCommentStatusEnum.DISABLE.NAME
        this.$message.success(res.msg)
      })
    },
    delComment (record) {
      apiDelCaseComment(record.id).then(res => {
        this.$message.success(res.msg)
        this.commentList = this.commentList.filter(item => item.id !== record.id)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  line-height: 25px;
}
.customer-info {
  margin-top: 16px;
  em {
    color: @disabled-color;
    font-style: normal;
    margin-left: 16px;
  }
}

</style>
